<!-- 企业信息查询 -->
<template>
  <div class="home-page-content">
    <h3>企业信息查询</h3>
    <Row :gutter="30">
      <Col span="6">
        <CardMain itemName="公司名称">
          <Input v-model="formData.input" placeholder="请输入"></Input>
        </CardMain>
      </Col>
      <Col span="6">
        <CardMain itemName="服务地区">
          <Input v-model="formData.input" placeholder="请输入"></Input>
        </CardMain>
      </Col>
      <Col span="6">
        <CardMain itemName="产业标记">
          <Input v-model="formData.input" placeholder="请输入"></Input>
        </CardMain>
      </Col>
      <Col span="12">
        <CardMain itemName="组织范围">
          <Select
            v-model="formData.input"
            placeholder="上级组织"
            class="company-select"
          >
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
          <Input v-model="formData.input" placeholder="搜索关键词"></Input>
        </CardMain>
      </Col>
      <Col span="12">
        <div class="action-search-btn">
          <Button type="primary">查询</Button>
          <Button type="primary">重置</Button>
        </div>
      </Col>
    </Row>
    <Row class="main-box">
      <Col span="24">
        <Table :columns="columns" :data="listData">
          <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <BtnText @BtnClick="viewDetail(row)"> 查看详情 </BtnText>
          </template>
        </Table>
      </Col>
    </Row>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script type="text/javascript">
export default {
  name: "enterpriseInforInquiry",
  components: {},
  data() {
    return {
      formData: {
        input: "",
        page: 1,
        size: 10,
      },
      columns: [
        {
          title: "公司名称",
          slot: "name",
        },
        {
          title: "上级组织",
          key: "age",
        },
        {
          title: "公司住所",
          key: "address",
        },
        {
          title: "服务地区",
          key: "address",
        },
        {
          title: "产业标记",
          key: "address",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      listData: [
        {
          id: 1,
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
        },
        {
          id: 2,
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
        },
        {
          id: 3,
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
        },
        {
          id: 3,
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
        },
      ],
      total: 10,
    };
  },
  methods: {
    pageSizeChange(row) {
      console.log(row, "pageSizeChange", this.formData);
    },
    // 查看详情
    viewDetail(row) {
      console.log(row, "row");
      this.$router.push({
        path: "/enterpriseInforDetail",
        query: {
          id: row.id,
        },
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.total = 1000;
    }, 2000);
  },
};
</script>

<style lang="less" scoped>
.home-index-content {
  h3 {
    font-size: 18px;
  }
}

.company-select {
  margin-right: 10px;
}
</style>
